<template>
  <el-card>
    <el-table :data="skuArr" border style="margin: 10px 0px">
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="80px"
      ></el-table-column>
      <el-table-column
        label="SKU名称"
        prop="skuName"
        align="center"
        show-overflow-tooltip="true"
        width="250px"
      ></el-table-column>
      <el-table-column
        label="SKU描述"
        prop="skuDesc"
        align="center"
        show-overflow-tooltip="true"
        width="250px"
      ></el-table-column>
      <el-table-column label="图片" align="center" width="170px">
        <template #="{ row, $index }">
          <img :src="row.skuDefaultImg" alt="" width="100px" />
        </template>
      </el-table-column>
      <el-table-column
        label="重量(克)"
        align="center"
        width="170px"
        prop="weight"
      ></el-table-column>
      <el-table-column
        label="价格(元)"
        align="center"
        width="170px"
        prop="price"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="280px" fixed="right">
        <template #="{ row, $index }">
          <el-button
            plain
            :icon="row.isSale == 1 ? 'Bottom' : 'Top'"
            :type="row.isSale == 1 ? 'info' : 'success'"
            size="default"
            @click="updateSale(row)"
          ></el-button>
          <el-button
            plain
            icon="Edit"
            type="primary"
            size="default"
            @click="updateSku"
          ></el-button>
          <el-button
            plain
            icon="InfoFilled"
            type="info"
            size="default"
            @click="findSku(row)"
          ></el-button>
          <el-popconfirm
            @confirm="deleteSku(row)"
            width="200px"
            :title="`你确定要删除${row.skuName}吗?`"
          >
            <template #reference>
              <el-button
                plain
                icon="Delete"
                type="danger"
                size="default"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev,pager,next,jumper,->,sizes,total"
      :total="total"
      @current-change="handler"
      @size-change="sizeHandler"
    ></el-pagination>
    <!-- 抽屉组件->展示商品详情 -->
    <el-drawer v-model="drawer">
      <!-- 标题部分 -->
      <template #header>
        <h4>查看商品的详情</h4>
      </template>
      <template #default>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">重量(克)</el-col>
          <el-col :span="18">{{ skuInfo.weight }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">价格(元)</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin-right: 10px"
              v-for="(item, index) in skuInfo.skuAttrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin-right: 10px"
              v-for="(item, index) in skuInfo.skuSaleAttrValueList"
              :key="item.id"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0px">
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel
              v-if="skuInfo.skuImageList.length > 0"
              :interval="4000"
              type="card"
              height="200px"
            >
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </el-carousel-item>
            </el-carousel>
            <el-skeleton v-else style="width: 240px">
              <template #template>
                <el-skeleton-item
                  variant="image"
                  style="width: 240px; height: 240px"
                />
                <div style="padding: 14px">
                  <el-skeleton-item variant="p" style="width: 50%" />
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                    "
                  >
                    <el-skeleton-item
                      variant="text"
                      style="margin-right: 16px"
                    />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  reqSkuInfo,
  reqSkuList,
  reqSaleSku,
  reqCancelSaleSku,
  reqRemoveSku,
} from '@/api/product/sku'
import type {
  skuResponseData,
  SkuData,
  SkuInfoData,
} from '@/api/product/sku/type'
import { ElMessage, ElNotification } from 'element-plus'
let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let skuArr = ref<SkuData[]>([])
let skuInfo = ref<any>({})
// 控制抽屉的显示与隐藏
let drawer = ref<boolean>(false)
// 组件挂载完毕获取skuList
onMounted(() => {
  getSkuList()
})
// 封装获取skuList的方法
const getSkuList = async (pager = 1) => {
  currentPage.value = pager
  const result: skuResponseData = await reqSkuList(
    currentPage.value,
    pageSize.value,
  )
  if (result.code == 200) {
    total.value = result.data.total
    skuArr.value = result.data.records
  }
}
// 当前页面变化的回调
const handler = (num: number) => {
  getSkuList(num)
}
// 分页器每一页数量变化的回调
const sizeHandler = () => {
  getSkuList()
}
// 商品上架/下架的回调
const updateSale = async (row: SkuData) => {
  if (row.isSale == 1) {
    const result = await reqCancelSaleSku(row.id as number)
    if (result.code == 200) {
      ElMessage({
        type: 'success',
        message: `商品${row.skuName}下架成功`,
      })
      getSkuList(currentPage.value)
    } else {
      ElMessage({
        type: 'error',
        message: `商品${row.skuName}下架失败`,
      })
    }
  } else {
    const result = await reqSaleSku(row.id as number)
    if (result.code == 200) {
      ElMessage({
        type: 'success',
        message: `商品${row.skuName}上架成功`,
      })
      getSkuList(currentPage.value)
    } else {
      ElMessage({
        type: 'error',
        message: `商品${row.skuName}上架失败`,
      })
    }
  }
}
// 编辑Sku的回调
const updateSku = () => {
  ElNotification({
    title: '很抱歉 (T_T)',
    message: '当前功能正在努力研发中...',
    type: 'warning',
  })
}
// 查看商品详情的回调
const findSku = async (row: SkuData) => {
  // 获取商品详情
  const result: SkuInfoData = await reqSkuInfo(row.id as number)
  if (result.code == 200) {
    // 存储已有的SKU
    skuInfo.value = result.data
    // 抽屉展示
    drawer.value = true
  } else {
    ElMessage({
      type: 'error',
      message: '无法获取商品详情，请稍后再试!',
    })
  }
}
const deleteSku = async (row: SkuData) => {
  const result = await reqRemoveSku(row.id as number)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: `删除${row.skuName}成功`,
    })
    getSkuList(
      skuArr.value.length > 0 ? currentPage.value : currentPage.value - 1,
    )
  } else {
    ElMessage({
      type: 'error',
      message: `删除${row.skuName}失败`,
    })
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>